<template>
  <div class="execution">
    <basic-container>
      <el-tabs v-model="activeName" @tab-click="handleClickTab">
        <el-tab-pane label="已通过" name="first"></el-tab-pane>
        <el-tab-pane label="未审核" name="second"></el-tab-pane>
        <el-tab-pane label="已关闭" name="fourth"></el-tab-pane>


        <div class="table-container" style="margin-top: 20px">
          <el-table
            border
            :data="list"
            :header-cell-style="{ color: '#4D4D4D', background: '#fafafa' }">
            <el-table-column
              label="内容ID"
              min-width="120"
              prop="id"
              align="center"></el-table-column>
            <el-table-column
              label="内容类别"
              min-width="120"
              align="center">
              <template slot-scope="scope">
                {{ scope.row.type | Type }}
              </template>
            </el-table-column>
            <el-table-column
              label="所属栏目"
              show-overflow-tooltip
              min-width="120"
              prop="title"
              align="center"></el-table-column>
            <el-table-column
              label="封面"
              min-width="120"
              prop="cover"
              align="center">
              <template slot-scope="scope">
                <img v-if="scope.row.type == 2" :src="scope.row.cover" style="width: 50px;height: 50px;"/>
                <video v-if="scope.row.type == 1" :src="scope.row.content" style="width: 50px;height: 50px;"></video>
              </template>
            </el-table-column>
            <el-table-column
              label="标题"
              show-overflow-tooltip
              min-width="120"
              prop="title"
              align="center"></el-table-column>
            <el-table-column
              label="正文"
              show-overflow-tooltip
              min-width="120"
              prop="text"
              align="center"></el-table-column>
            <el-table-column
              label="新增时间"
              min-width="120"
              prop="createTime"
              align="center"></el-table-column>
            <el-table-column
              label="发布时间"
              v-if="listQuery.status == 1"
              min-width="120"
              prop="releaseTime"
              align="center"></el-table-column>
            <el-table-column
              label="编辑时间"
              min-width="120"
              prop="updateTime"
              align="center"></el-table-column>
            <el-table-column label="操作" min-width="150">
              <template slot-scope="scope">
                <el-button v-if="listQuery.status != 1" size="small" type="text" @click="handleDelete(scope.$index, scope.row)" plain>删除</el-button>
                <el-button v-if="listQuery.status == 1" size="small" type="text" @click="handleColes(scope.$index, scope.row)" plain>关闭</el-button>
                <el-button v-if="listQuery.status == 3" size="small" type="text" @click="handleResend(scope.$index, scope.row)" plain>重发</el-button>
                <el-button v-if="listQuery.status == 2" size="small" type="text" @click="handleExamine(scope.$index, scope.row)" plain>审核</el-button>
                <el-button v-if="listQuery.status == 1" size="small" type="text" @click="handleDetail(scope.$index, scope.row)" plain>详情</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>

        <div class="pagination-container">
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            layout="total, sizes,prev, pager, next,jumper"
            :page-size="listQuery.size"
            :page-sizes="[5, 10, 15]"
            :current-page.sync="listQuery.current"
            :total="total">
          </el-pagination>
        </div>
      </el-tabs>
    </basic-container>
  </div>
</template>
<script>
import { contentPage,delContent,closeContent } from "@/api/found/index";

const defaultListQuery = {
  current: 1,
  size: 10,
  status: 1
};

export default {
  data() {
    return {
      activeName: "first",
      list: [],
      listQuery: Object.assign({}, defaultListQuery),
      tabValueMap: {
        first: 1,
        second: 2,
        fourth: 3,
      },
      total: 0,
    }
  },
  filters: {
    Type(val) {
      if (val === 1) {
        return "视频";
      } else if (val === 2) {
        return "图片";
      }
    },
  },
  created() {
    this.getList();
  },
  methods: {
    handleClickTab(tab, event) {
      this.listQuery.status = this.tabValueMap[this.activeName];
      this.listQuery.current = 1;
      this.getList();
    },
    handleSizeChange(val) {
      this.listQuery.size = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.listQuery.current = val;
      this.getList();
    },
    getList() {
      contentPage(this.listQuery).then(res => {
        this.list = res.data.data.records;
        this.total = res.data.data.total;
      })
    },
    handleDetail(index,row) {
      this.$router.push({
        path: "/found/content/details",
        query: { id: row.id },
      });
    },
    handleExamine(index,row) {
      this.$router.push({
        path: "/found/content/examine",
        query: { id: row.id },
      });
    },
    handleResend(index,row) {
      this.$router.push({
        path: "/found/content/resend",
        query: { id: row.id },
      });
    },
    handleColes(index,row) {
      const that = this;
      that.$confirm("确认要关闭？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(function () {
        closeContent({id: row.id}).then(res => {
          if (res.data.code == 200) {
            that.$message({
              message: res.data.msg,
              type: "success",
              duration: 1000,
            });
            that.getList();
          } else {
            that.$message({
              message: res.data.msg,
              type: "warning",
              duration: 1000,
            });
          }
        })
      })
    },
    handleDelete(index,row) {
      const that = this;
      that.$confirm("确认要删除" + row.title, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(function () {
        delContent({id: row.id}).then(res => {
          if (res.data.code == 200) {
            that.$message({
              message: res.data.msg,
              type: "success",
              duration: 1000,
            });
            that.getList();
          } else {
            that.$message({
              message: res.data.msg,
              type: "warning",
              duration: 1000,
            });
          }
        })
      })
    },
  }
}



</script>
